<script setup>
/**
 * 主页头部
 * 用于搜索、添加好友
 */
import { useSearchStore } from '@/stores/useSearchStore.js'
import { useInChatContactInfStore } from '@/stores/useInChatContactInfStore.js'
const inChatContactInfStore  = useInChatContactInfStore()
const searchStore = useSearchStore()
</script>

<template>
    <div style="display: flex">
        <div>
            <div style="display: flex; margin-top: 15px; margin-left: 25px">
                <el-input
                    placeholder="搜索"
                    v-model="searchStore.massage"
                    style="width: 230px; height: 30px"
                ></el-input>
                <div class="addBtn">
                    <img src="../../../assets/svg/add.svg" style="height: 25px; width: 25px" alt=""/>
                </div>
            </div>
        </div>
        <div style="height: 60px;position: relative;left: 12px;display: flex">
          <img v-if="inChatContactInfStore.headImgUrl" :src=inChatContactInfStore.headImgUrl style="border-radius: 12px;height: 46px; width: 46px;margin-right: 10px;position: relative;top:6px"  alt=""/>
          <div style="line-height: 60px;height: 60px;">{{inChatContactInfStore.username}}</div>
        </div>
    </div>
</template>

<style scoped>
.addBtn {
    background-color: var(--mygreey);
    height: 30px;
    width: 30px;
    border-radius: 5px;
    margin-left: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
</style>
